<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>煤炭管理系统</title>
    <#include "/base/base-css.ftl" >
    <link rel="stylesheet" href="/static/css/person.css">
    <style type="text/css">
        .person-detail {
            position: relative;
            display: flex;
            align-items:center;

        }
        .person-left {
            position: relative;
            margin: 50px 100px;
        }
        .person-right {
            width: 600px;
            margin: 10px auto;
            font-size: 16px;
        }
        .person-detail img{
            display: block;
            border-radius:100px;
            width: 300px;
            object-fit: cover;
            margin: 0 auto;
            overflow: hidden;
            box-shadow:1px 1px 3px #333;
        }
        .person-detail img:hover{

            box-shadow:0 0 10px #333;
        }
        .person-detail h2{
             font-size: 14px;
            text-align: center;
            color: rgba(0,0,0,0.8);
            margin: 20px 0;

        }

        .person-row {
            font-size: 14px;
            line-height: 26px;
            color: rgba(0,0,0,0.8);
            margin: 20px 0;
        }
        .person-value  {
            font-size: 18px;
            color: rgba(0,0,0,0.9);
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <#include "/base/main-header.ftl">

    <#include "/base/main-left.ftl">
    <div class="layui-body">
        <!-- 内容主体区域  -->
        <div class="site-title">
            <fieldset>
                <legend>
                    <a class="site-title-text">个人信息</a>
                </legend>
            </fieldset>
        </div>

        <div class="person-detail ">
            <div class="person-left">
                <img src="${Session["user"].avatarUrl}" alt="用户头像">
                <h2>用户头像</h2>
            </div>
            <div class="person-right">
                <div class="layui-row person-row">
                    <span class="">姓名:</span>
                    <span class="person-value">${Session["user"].nickName}</span>
                </div>
                <div class="layui-row person-row">
                    <span class="">用户名:</span>
                    <span class="person-value">${Session["user"].username}</span>
                </div>
                <div class="layui-row person-row">
                    <span class="">岗位:</span>
                    <span class="person-value">${dept!"未知"}</span>
                </div>
                <div class="layui-row person-row">
                    <span class="">联系电话:</span>
                    <span class="person-value">${Session["user"].mobile}</span>
                </div>
                <div class="layui-row person-row">
                    <span class="">联系地址:</span>
                    <span class="person-value">${ address!"未知"}</span>
                </div>
                <div class="layui-row person-row">
                    <span class="">电子邮件:</span>
                    <span class="person-value">${Session["user"].email}</span>
                </div>
                <button id="change-pwd" class="layui-btn layui-btn-normal">修改密码</button>
            </div>
        </div>


    <#include "/base/main-footer.ftl">
</div>

    <#include "../base/base-js.ftl">
<script>
    function checkPwd(field,layer) {
        var old = field.oldpwd || ""
        var pwd = field.pwd || ""
        var pwdAg = field.pwdAg || ""
        if(old === "" || pwd === "" || pwdAg === ""){
            return false
        }
        if (pwd !== pwdAg) {
            layer.msg("两次密码不相等")
            return false;
        }
        return true;
    }

    layui.use(['layer', 'form', 'element', 'jquery'], function () {
        var layer = layui.layer, form = layui.form, $ = layui.jquery;
        form.on('submit(changPwd)', function (data) {
            if (checkPwd(data.field,layer)) {
                $.ajax({
                    type: "POST",
                    url: "/changePwd",
                    data: data.field,
                    success: function (data) {
                        if (data.isSuccess){
                            layer.msg("修改成功,2秒后跳回登录页面")
                            setTimeout(function () {
                                window.location = "/user/public/logout"
                            },2000)
                        } else {
                            layer.msg(data.msg)
                        }
                    }
                });
            }

            return false;
        });
        $("#change-pwd").click(function (event) {

            layer.open({
                type: 1,
                content: $('#chang-form'),
                area:'600px'
            });
        })

    });
</script>

</body>
<div class="site-text" style="margin: 5%; display: none" id="chang-form"   >
    <form class="layui-form"    >
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password"  id="oldpwd" name="oldpwd" lay-verify="required" autocomplete="off" placeholder="请输入原密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" id="pwd" name="pwd" lay-verify="required" autocomplete="off" placeholder="请输入新密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">再次输入新密码</label>
            <div class="layui-input-block">
                <input type="password" id="pwdAg" name="pwdAg" lay-verify="required" autocomplete="off" placeholder="请再次输入新密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="changPwd">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>

</html>